<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type=text/javascript src="../vue.js"></script>
	</head>
	<body>
		<div id="app">
			<child :number="'8'"></child>
		</div>
		<script>
		
		/*
		子组件必须接受父组件传过来的值
		子组件必须使用update:变量名 往外暴露一个事件
		父组件中调用必须为v-model：名字来调用
		*/
		const {ref, inject, onMounted, reactive, provide, getCurrentInstance} = Vue;
		const child = {
			props:['number'],
			setup(props, { expose, emit }) {
			  console.log("props = ",props);
			  const proxy = getCurrentInstance()
			  console.log("proxy = ",proxy)
		      const name = inject('name')
			  const age = inject('age')
			  onMounted(function tt(){
				  console.log("the child is onMounted");
				  
			  })
			  const handleClick = () => {
				  console.log("handle Clicked");
				proxy.data.lan = "vue3"
				proxy.props.number = 99
				console.log("proxy = ",proxy);
			  }
			  return {name,age,handleClick}
			},
			methods:{
				btnClick(){
					this.lan = "vue4"
					this.number = 22
					console.log("props = ",this.$props,this.number);
				}
				
			},
			data(){
				return {lan:"vue2"}
			},
			template:`<div @click="handleClick">{{name}},{{age}},{{number}},{{lan}}</div>
			<button @click="btnClick">{{name}},{{age}},{{number}},{{lan}}</button>`
			
		}
		
		const App = {
		    setup(){
		        // 为目标对象创建一个响应式对象
				const name = provide('name','xunyan')
				const age = provide('age',39)
				onMounted(() => {
					console.log("the parent is onMounted");
				})
		    },
			
			methods:{
				
			},
			components:{
				child
			},
		};
		const app = Vue.createApp(App);
		app.mount('#app');
		
		
		</script>
	</body>
</html>
